<template>
  <!-- KOL审核 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="用户ID:" label-width="60px">
            <el-input type="text" v-model="listQuery.user_id" clearable placeholder="请输入用户ID"  />
          </el-form-item>
          <el-form-item label="申请类型:" label-width="80px">
            <el-select v-model="listQuery.types" placeholder="请选择申请类型" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in typeData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请进度:" label-width="80px">
            <el-select v-model="listQuery.check_status" placeholder="请选择申请进度" filterable >
              <el-option :label="item.label" :value="item.value" v-for="(item, index) in statusData" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button v-permission="'kol.check'" :disabled="!checkedItem || checkedItem.check_status==1?true:false" type="primary" size="mini" icon="el-icon-check" @click="isShowDetails = true">审核</el-button>
          <el-button v-permission="'kol.apply'" :disabled="withdraw" type="primary" icon="el-icon-mobile" size="mini" @click="isShowChannelDetails = true">提现打款</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{""}}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="apply_id" label="申请人ID" align="center" width="150"/>
          <el-table-column prop="created_at" label="申请时间" align="center" width="180"/>
          <el-table-column prop="amount" label="申请金额" align="center" width="180"/>
          <el-table-column prop="types" label="申请类型" align="center" width="90">
            <template slot-scope="scope">
              <el-tag :type="typeType(scope.row.types)" >{{ typeLabel(scope.row.types) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="check_status" label="是否通过" align="center" width="90">
            <template slot-scope="scope">
              <el-tag :type="scope.row.check_status==1?'success':scope.row.check_status==0?'primary':'danger'" >{{ scope.row.check_status==1?'通过':scope.row.check_status==0?'待审核':'不通过' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="order_status" label="订单状态" align="center" width="100">
            <template slot-scope="scope">
              <el-tag v-show="scope.row.types==3?true:false" :type="orderType(scope.row.order_data.order_status)" >{{ orderStatus(scope.row.order_data.order_status) }}</el-tag>
              <el-tag v-show="scope.row.types!=3" type="" >默认</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="user_id" label="用户ID" align="center" width="120"/>
          <el-table-column prop="nick_name" label="用户昵称" align="center" width="150" show-overflow-tooltip/>
          <el-table-column prop="recharge_total" label="总充值" align="center" width="150"/>
          <el-table-column prop="agent_total" label="代理总人数" align="center" width="150"/>
          <el-table-column prop="kol_total" label="KOL总邀请" align="center" width="150"/>
          <el-table-column prop="kol_rebate" label="KOL返利" align="center" width="150"/>
          <el-table-column prop="kol_add_total" label="总上分" align="center" width="150"/>
          <el-table-column prop="kol_dec_total" label="总减分" align="center" width="150"/>
          <el-table-column prop="cash_total" label="总提现" align="center" width="150"/>
          <el-table-column prop="can_cash_amount" label="剩余可提现" align="center" width="150"/>
          <el-table-column prop="commission" label="佣金" align="center" width="150"/>
          <el-table-column prop="invite_rebate" label="邀请返利" align="center" width="150"/>
          <el-table-column prop="amount_total" label="剩余卢比" align="center" width="150"/>
          <el-table-column prop="reason" label="申请原因" align="center" width="200"/>
          <el-table-column prop="check_reason" label="审核说明" align="center" width="200"/>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" @onHideDetails="onHideDetails" :data="checkedItem" />
      <el-dialog :visible.sync="isShowChannelDetails" v-if="isShowChannelDetails" title="提现打款" width="45%" :before-close="onHideDetails" top="200px" :close-on-click-modal="false">
        <el-select v-model="channelID" placeholder="请选择提现渠道" filterable >
          <el-option v-show="item.status==1?true:false" :label="'【'+item.name+'】'" :value="item.pay_way_id" v-for="(item, index) in withdrawChannelData" :key="index"/>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="isShowChannelDetails = false">取 消</el-button>
          <el-button type="primary" size="medium" @click="withdrawalChannel">确 定</el-button>
        </span>
      </el-dialog>
      <GoogleCheck ref="GoogleCheck" :show="googleCheckShow" :type="3" @handleConfirm="withdrawalChannel" @handleClose="handleQrClose"/>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getKolCheck
} from '@/api/kol'
import {
  editWithdrawalOrder,
  withdrawalOrderChannels
} from '@/api/order'
import { 
  ORDER_STATUS,
 } from '@/utils/enum'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'
import GoogleCheck from '@/components/GoogleCheck'
export default {
  name: 'kolCheck',
  components: {
    PageDetails,
    SearchTable,
    GoogleCheck
  },
  data () {
    return {
      ORDER_STATUS,
      typeData:[
        {label: '全部',value: 0,type: ''},
        {label: '加钱',value: 1,type: 'success'},
        {label: '减钱',value: 2,type: 'danger'},
        {label: '提现',value: 3,type: 'primary'},
      ],
      statusData:[
        {label: '全部',value: -1,type: ''},
        {label: '默认',value: 0,type: 'primary'},
        {label: '通过',value: 1,type: 'success'},
        {label: '不通过',value: 2,type: 'danger'},
      ],
      channelID:'',
      withdrawChannelData: [],
      isShowChannelDetails:false,
      googleCheckShow:false,
      listQuery: {
        page: 1,
        size: 50,
        user_id:'',
        agent_id:'',
        types:0,
        check_status:-1,
      },
      checkedItem:null,
      isShowDetails:false,
      listLoading: false,
      dataList: [],
      currentTotal: 0,
    }
  },
  created () {
    // this.getDataList();
    // this.getWithdrawalChannelList()
  },
  activated(){
    this.getDataList()
    this.getWithdrawalChannelList()
  },
  computed:{
    withdraw(){
      let checkedItem=this.checkedItem;
      if(!checkedItem){
        return true
      }else if(checkedItem.types==3 && checkedItem.check_status==1 && checkedItem.order_data.order_status==0){
        return false
      }else{
        return true
      }
    }
  },
  methods: {
    // KOL审核列表
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = []
      that.checkedItem = null
      const response = await getKolCheck(params)
      if (response.code == 1) {
        if (response.data.list) {
          response.data.list.forEach(item=>{
            item.isChecked = false
            item.amount=that.$public.mathNumberDivideWan(item.amount)
            item.cash_total=that.$public.mathNumberDivideWan(item.cash_total)
            item.recharge_total=that.$public.mathNumberDivideWan(item.recharge_total)
            item.can_cash_amount=that.$public.mathNumberDivideWan(item.can_cash_amount)
            item.commission=that.$public.mathNumberDivideWan(item.commission)
            item.invite_rebate=that.$public.mathNumberDivideWan(item.invite_rebate)
            item.amount_total=that.$public.mathNumberDivideWan(item.amount_total)
          })
          that.dataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 提现订单渠道
    getWithdrawalChannelList () {
      let that = this;
      withdrawalOrderChannels().then(res => {
        if (res.code == 1) {
          res.data.forEach(item => {
            item.success_rate = item.success_rate/100
          })
          that.withdrawChannelData=res.data
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    withdrawalChannel(){
      let that = this,params=that.checkedItem;
      // // 谷歌验证码
      // if(!that.$refs.GoogleCheck.formParams.google_code){
      //   return that.googleCheckShow=true
      // }else{
      //   that.googleCheckShow=false
      // }
      editWithdrawalOrder({
        order_num: params.order_data.order_num, //订单号
        order_status: 1,
        channel_id:that.channelID?that.channelID:0
      }).then(res => {
        if (res.code == 1) {
          that.$message.success(res.msg)
          that.getDataList()
          that.onHideDetails()
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 订单展示
    orderStatus(cellValue){
      return (this.ORDER_STATUS.find((item) => item.value === cellValue)?.label || "-");
    },
    // 订单状态
    orderType(cellValue){
      return (this.ORDER_STATUS.find((item) => item.value === cellValue)?.type || "-");
    },
    // 申请类型
    typeLabel(cellValue){
      return (this.typeData.find((item) => item.value === cellValue)?.label || "-");
    },
    typeType(cellValue){
      return (this.typeData.find((item) => item.value === cellValue)?.type || "-");
    },
    // 申请状态
    statusLabel(cellValue){
      return (this.statusData.find((item) => item.value === cellValue)?.label || "-");
    },
    statusType(cellValue){
      return (this.statusData.find((item) => item.value === cellValue)?.type || "-");
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val;
      this.dataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    // 取消谷歌验证
    handleQrClose(){
      this.googleCheckShow = false
    },
    // 隐藏详情
    onHideDetails (show) {
      this.isShowDetails = false
      this.isShowChannelDetails = false
      this.googleCheckShow = false
      if (show) {
        this.getDataList()
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        user_id:'',
        agent_id:'',
        types:0,
        check_status:-1,
      }
      this.getDataList()
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>

</style>
